
<!-- <template>
   //数据绑定
    <span :endTime="endTime" :endText="endText">
        <slot>
            {{ content }}
        </slot>
    </span>
</template>
<script lang="ts">
import { defineComponent } from 'vue';

// interface timeType{
//     hour:string|number
// }

export default defineComponent({
    data() {
        return {
            content: '',  
        }
    },
    //接收父级传过来的参数
    props: {
        // startTime:{
        //      type:String,
        //      defalut:'2022-9-21 21:02:59' //new Date()
        // },
        endTime: {
            type: String,
            default: '2022-10-21 21:02:59'
        },
        endText: {
            type: String,
            default: '已结束'
        },
    },
    methods:{
        // timestamp时间戳
        countdowm(timestamp:string) {
            let self = this;
            console.log(self);
            let timer = setInterval(function () {
                let nowTime = new Date();
                let endTime = new Date(timestamp);
                let t = endTime.getTime() - nowTime.getTime();
                if (t > 0) {
                    let day = (Math.floor(t / 86400000));
                    let hour =( Math.floor((t / 3600000) % 24));
                    let min = Math.floor((t / 60000) % 60);
                    let sec = Math.floor((t / 1000) % 60);
                    //对时间进行格式化
                    hour = (hour < 10 ? "0" + hour : hour) as number;
                    min = (min < 10 ? "0" + min : min) as number;
                    sec = (sec < 10 ? "0" + sec : sec) as number;
                    let format = '';
                    if (day > 0) {
                        format = `${day}天${hour}小时${min}分${sec}秒`;
                    }
                    if (day <= 0 && hour > 0) {
                        format = `${hour}小时${min}分${sec}秒`;
                    }
                    if (day <= 0 && hour <= 0) {
                        format = `${min}分${sec}秒`;
                    }
                    self.content = format;
                } else {
                    //清除定时器
                    clearInterval(timer);
                    self.content = self.endText;
                }
            }, 1000);
        }
    },
    mounted() {
        // console.log(this.startTime)
        this.countdowm(this.endTime)
    },
}
)

</script>

<style lang="scss" scoped>

</style> -->


<!-- <template>
    <div class="count-down">
      <span class="count-down-end-time">{{endHours}}点场</span>
      <span class="count-down-surplus">{{surplus | filterTime}}</span>
    </div>
  </template>

  <script lang="ts">
  import { defineComponent } from 'vue'
  import filterTime from '../js/filters.js'

  /**
   * 能力： 传递给组件一个活动时间，组件根据这个时间去进行计算
   *1、当时间未到开始时间的时候： 展示倒计时
   *2、当时间到了开始时间的时候： 活动进行中
   *3、当时间超过了开始时间的时候：活动已经结束
   */
  export default defineComponent({
    name: 'CountDown',
    props: {
      // 活动开始时间
      endHours: {
        type: Number,
        required: true,
        default: 2022-12-1
      }
    },
    created () {
      this.computedSurplusTime()
    },
    data () {
      return {
        // 展示活动状态
        surplus: '',
        // 距离活动开始的秒数
        diffSeconds: 0,
        interval:0
      }
    },
    methods: {
      computedSurplusTime () {
        if (this.interval) {
          clearInterval(this.interval)
        }
        const date = new Date()
        /**
         * 当前时间过了开始时间，活动结束
         */
        if (date.getHours() > this.endHours) {
          this.surplus = '活动已结束'
          return
        }
        /**
         * 当前时间到了开始时间，活动进行中
         */
        if (date.getHours() === this.endHours) {
          this.surplus = '活动进行中'
          return
        }
        /**
         * 当前时间未到开始时间的时候：显示倒计时
         * 1、获取当前时间与活动开始时间的秒数差距
         * 2、根据秒数转化为对应的 -> 时分秒
         */
        // 差距时数
        // 开始时间16 ，当前时间 12. 3小时59分59秒
        const diffHours = this.endHours - date.getHours() - 1
        // 差距分钟数
        const diffMinutes = 60 - date.getMinutes() - 1
        // 差距秒数
        const diffSeconds = 60 - date.getSeconds()
        // 转化为对应的秒数
        this.diffSeconds = diffHours * 3600 + diffMinutes * 60 + diffSeconds
        // 当时间每过1秒 秒数差距应该 - 1
        this.interval = setInterval(() => {
          this.diffSeconds -= 1
        }, 1000)
      }
    },
    watch: {
      diffSeconds (newV) {
        // 当前的秒数 / 3600，向下取整，获取到转化的小时数
        const hours = Math.floor(newV / 3600)
        // 当前秒数 / 60，向下取整
        // 获取到所有分钟数 3600 / 60 = 60分钟
        // 对60取模，超过小时数的分钟数
        const minutes = Math.floor(newV / 60) % 60
        // 当前的秒数 % 60，获取到 超过小时数、分钟数的秒数（秒数）
        const seconds = newV % 60
        // 拼装数据
        this.surplus = hours + ':' + minutes + ':' + seconds
        /**
         * 在当前秒数 变为 0， 需要修改展示数据
         */
        if (newV === 0) {
          this.computedSurplusTime()
        }
      }
    }
  })
  </script>

  <style lang="scss">

  </style> -->

<!-- 
  <template>
    <div class="count-down">
      <span class="count-down-end-time">{{endHours}}点场</span>
      <span class="count-down-surplus">{{interval}}</span>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent } from 'vue'

  export default defineComponent(
    {
    props: {
    // 接收父组件传入的时间
      endHours: {
        type: Number,
        required: true,
        default: 0
      }
    },
    data() {
      return {
        surplus: '',
        diffSeconds: 0,
        interval: 0
      }
    },
    methods: {
      computedSurplusTime() {
        if (this.interval) {
          clearInterval(this.interval)
        }
        const date = new Date()
        if (date.getHours() > this.endHours) {
          this.surplus = '活动已结束'
          return
        }
        if (date.getHours() === this.endHours) {
          this.surplus = '活动进行中'
          return
        }
        if (date.getHours() < this.endHours) {
          this.surplus = '活动未开始'
        }
  
        const diffHours = this.endHours - date.getHours() - 1
        const diffMinutes = 60 - date.getMinutes() - 1
        const diffSeconds = 60 - date.getSeconds()
  
        this.diffSeconds = diffHours * 3600 + diffMinutes * 60 + diffSeconds
  
        this.interval = setInterval(() => {
          this.diffSeconds -= 1
        }, 1000)
      }
    },
    watch: {
      diffSeconds(newV) {
        const hours = Math.floor(newV / 3600)
        const minutes = Math.floor(newV / 60) % 60
        const seconds = newV % 60
        this.surplus = hours + ':' + minutes + ':' + seconds
  
        if (newV === 0) {
          this.computedSurplusTime()
        }
      },
      endHours() {
        this.computedSurplusTime()
      }
    },
    created() {
      this.computedSurplusTime()
    }
  })
  </script>
  
  <style lang="scss" scoped>
  .count-down {
    display: inline-block;
    font-size: px2rem(14);
    margin-left: px2rem(8);
  
    span {
      display: inline-block;
      padding: px2rem(2) px2rem(4);
    }
  
    &-end-time {
      background-color: #d81e06;
      border-top-left-radius: px2rwm(4);
      border-bottom-left-radius: px2rwm(4);
      border: px2rem(1) solid #d81e06;
    }
  
    &-surplus {
      background-color: #fff;
      border-top-right-radius: px2rem(4);
      border-bottom-right-radius: px2rem(4);
      border: px2rem(1) solid #d81e06;
      color: #d81e06;
    }
  }
  </style>
  
   -->



   <!-- 城市联动组件 -->
<!-- <template>
    <div class="city-select">
        <div>
            //选择省份时：更新市、区数据 
            <select v-model="currentProvince" @change="updateCity() ">
                <option v-for="(item, index) in list" :key="index">{{ item.province }}</option>
            </select>
            <select v-model="city">
                <option v-for="(item, index) in cityList" :key="index">{{ item.city }}</option>
            </select>
        </div>
    </div>
</template>
  
   
<script lang="ts">

interface cityType {
    id: number;
    city: string;
}

import { defineComponent } from 'vue';
export default defineComponent({
    name: 'city-select',
    data() {
        return {
            list: [{
                id: 101,
                province: "四川省",
                citys: [{
                    id: 1011,
                    city: "成都"
                }, {
                    id: 1012,
                    city: "绵阳"
                }, {
                    id: 1013,
                    city: "宜宾"
                }, {
                    id: 1014,
                    city: "乐山"
                }]
            }, {
                id: 102,
                province: "贵州省",
                citys: [{
                    id: 1021,
                    city: "贵阳"
                }, {
                    id: 1022,
                    city: "六盘水"
                }, {
                    id: 1023,
                    city: "黔南"
                }]
            }, {
                id: 103,
                province: "云南省",
                citys: [{
                    id: 1031,
                    city: "昆明"
                }, {
                    id: 1032,
                    city: "大理"
                }, {
                    id: 1033,
                    city: "丽江"
                }]
            },
            {
                id: 104,
                province: "江苏省",
                citys: [{
                    id: 1041,
                    city: "浙江"
                }, {
                    id: 1042,
                    city: "温州"
                }, {
                    id: 1043,
                    city: "江城"
                },

                ]
            },
            {
                id: 105,
                province: "北京",
                citys: [{
                    id: 1051,
                    city: "朝阳"
                }, {
                    id: 1052,
                    city: "问问"
                }, {
                    id: 1053,
                    city: "固定"
                },

                ]
            },
            {
                id: 106,
                province: "甘肃",
                citys: [{
                    id: 1063,
                    city: "丽江"
                }, {
                    id: 1062,
                    city: "广泛"
                }, {
                    id: 1063,
                    city: "丽江"
                },

                ]
            },
            {
                id: 107,
                province: "重庆",
                citys: [{
                    id: 1071,
                    city: "方法"
                }, {
                    id: 1072,
                    city: "含税"
                }, {
                    id: 1073,
                    city: "达到"
                },

                ]
            }
            ], // 总数据
            currentProvince: '北京', // 省
            cityList: [] as Array<cityType>, // 市数据,
            city: '朝阳', // 市
        }
    },
    methods: {
        // 根据省的选择更新市数据
        updateCity() {
            this.list.forEach((item) => {
                if (item.province === this.currentProvince) {
                    console.log(item.citys)
                    this.cityList = item.citys
                }
            })
            //定义一个空数组，将匹配到的省所对应的市追加到空数组中，再循环这个新的数组
            this.city = this.cityList[0].city
        },
    },
    mounted() {
        //挂载就执行一次
        this.updateCity()
    },
})

</script>
   
<style lang="scss" scoped>
.city-select {
    // select {
        line-height: 28px;
        height: 28px;
        // height: 40px;
        width: 130px;
        // line-height: 40px;
        text-align: center;
        border: 1px solid #e5e5e5;
        padding: 0 10px;
        margin-right: 15px;
    // }
}
</style> -->


<!-- 出价记录 -->
<!-- 
<template>
    <div class="auction_info">
        <div class="auction_title" style="position:relative">
            <h3 style="float:left">出价记录</h3>
            <div style="float:right ;font-size: 14px;">查看所有出价记录 ></div>
        </div>
        <div class=".record_list_box">
            <div class="tHeader">
                <table>
                    <thead>
                        <tr>
                            <th class="th th1">买家</th>
                            <th class="th ">所出价格</th>
                            <th class="th th3">出价时间</th>
                            <th class="th ">状态</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in result" :key="item.id">
                            <td>{{item.username}}</td>
                            <td v-text="item.bidprice"></td>
                            <td v-text="(item.bidtime).split('.')[0].replace('T', ' ')"></td>
                            <td v-if="index == 0">领先者</td>
                            <td v-if="index != 0">淘汰</td>
                        </tr>
                         <tr class="out">
                            <td>枇杷片</td>
                            <td>4620元</td>
                            <td>2022-09-25 20:40:40</td>
                            <td>淘汰</td>
                        </tr>
                        <tr class="out">
                            <td>枇杷片</td>
                            <td>4620元</td>
                            <td>2022-09-25 20:40:40</td>
                            <td>淘汰</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="auction_info">
        <div class="auction_title" style="position:relative">
            <h3 style="float:left">我要出价</h3>
            <div style="float:left; font-size: 14px;">根据本网所售商品的特殊性及古旧书行业的具体情况，网站不支持7天内无理由退货。
                <a href="">《孔网拍卖参拍须知》</a>
            </div>
        </div>

        <div class=".record_list_box">
            <div class="loginBid">
                <div class="bid_title">
                    <ul class="deatil_Bid">
                        <li>
                            当前价格
                            <i class="gray new_price">￥{{submitdata.currentPrice}}</i>
                            <span class="fresh_btn">刷新价格</span>
                        </li>
                        <li>
                            起拍价
                            <i class="gray new_price">￥{{submitdata.startprice}}</i>
                        </li>
                        <li>
                            最小加价
                            <i class="gray new_price">￥{{submitdata.minimum}}</i>
                        </li>
                        <li style="clear: both;margin:0;padding:0;"></li>
                        <li>
                            可用保证金
                            <i class="gray new_price">￥0</i>
                        </li>
                        <li>
                            当前价格
                            <i class="gray new_price">￥0</i>
                            <span class="red" style="margin-left: 8px;"><span><a href="缴纳保证金地址">缴纳保证金></a></span></span>
                        </li>
                        <li style="clear: both;margin:0;padding:0;"></li>
                    </ul>
                    <div style="float:left; font-size: 14px;">
                        <div class="bid_text" style="padding-left: 40px;color: #888888;font-size: 12px;"><img
                                style="width: 12px;margin-right: 4px;position: relative;top:-1px;"
                                src="https://static.kongfz.com/pm-web/static/img/tip@2x.ee5ac772.png"
                                alt="">当前拍品买家佣金5%，竞拍保证金10.5%，出价时将冻结15.5% </div>
                    </div>
                </div>
                <div class="Bid_table">
                    <div class="bidAll">
                        <div class="check">常规竞买</div>
                        <div class="check">代理竞买</div>
                        <div class="bid_help_link check">
                            (什么叫)
                            <a href="">常规竞买, 代理竞买</a>
                        </div>
                    </div>
                    <div class="auction_box">
                        <div class="auction_box_name">您的竞买价:</div>
                        <div class="auction_box_m">
                            // 减价 
                            <div class="reduce gray">
                                <img class="black" src="https://static.kongfz.com/pm-web/static/img/reduce.d8815711.png"
                                    alt="">
                                <img class="gray"
                                            src="https://static.kongfz.com/pm-web/static/img/reduce_gray.4c16fa80.png"
                                            alt=""> 
                            </div>
                            <div class="entry">
                                <input type="text" v-model="submitdata.currentPrice">
                                选择框 
                                <ul class="selectCon" style="display: none;">
                                    selectCon_tmpl
                                    <li class="select_li">110</li>
                                    <li class="select_li">120</li>
                                    <li class="select_li">130</li>
                                    <li class="select_li">140</li>
                                    <li class="select_li">150</li>
                                    <li class="select_li">160</li>
                                    <li class="select_li">170</li>
                                    <li class="select_li">180</li>
                                    <li class="select_li">190</li>
                                </ul>
                            </div>
                          
                            <div class="increase">
                                <img class="black"
                                    src="https://static.kongfz.com/pm-web/static/img/increase.2529398d.png" alt="">
                               <img class="gray"
                                            src="https://static.kongfz.com/pm-web/static/img/increase_gray.f850346b.png"
                                            alt=""> 
                            </div>
                        </div>
                        <div class="putPrice red" @click="Submit">
                            <i class="button-text">竞价购买</i>
                        </div>
                        <div class="put_tip">只输入数字整数即可</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">

import { defineComponent } from 'vue';
import { bidrecord, getbidrecord } from '@/utils/api';
import { result } from 'lodash';
// import { throwStatement } from '@babel/types';
interface dataTypeI {
    id: number;
    bidprice: number;
    username: string;
    bidtime: string
}
export default defineComponent({
    name: 'bid',
    props: {
        uid: {
            type: Number,
            default: 2
        }
    },
    data() {
        return {
            // startprice:300,
            // bidstatus:1,
            // currentPrice: 300,
            submitdata: {
                currentPrice: 300,
                startprice: 200,
                bidstatus: 1,
                minimum: 10,
                bidtime: new Date(),
                userinfo: {
                    uid: 3,
                    username: '钩钩果子'
                }
            },

            result: [] as Array<dataTypeI>,
            fristInfo:[] as Array<dataTypeI>
        }
    },
    methods: {
        Submit() {
            console.log(this.submitdata)
            bidrecord(this.submitdata).then((res) => {
                console.log(res.data);
            });
            return this.submitdata;
        },

        //拿到数据并创建一个用户出价记录表
        getData() {
            getbidrecord(this.uid).then((res) => {
                if (res.status===200) {
                    this.result = res.data;
                    this.fristInfo.push(res.data[0])
                    console.log(res)
                }
            });
            // // console.log(uid);
            // return result;
        },

    },
    watch: {
        'submitdata.currentPrice'(nweVal) {
            console.log(nweVal);
            this.submitdata.currentPrice=nweVal
        }
    },
    mounted() {
        this.getData()
    },
})

</script>
       
<style lang="scss" scoped>
.red {
    color: #8c222c;
    font-weight: 400;
    font-size: 12px;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}


.auction_info {
    width: 1200px;
    float: right;
    border: 1px solid #e9e9e9;
    margin: 20px auto 0;

    .auction_title {
        height: 50px;
        line-height: 50px;
        font-size: 20px;
        color: #404040;
        font-weight: 500;
        border-bottom: 1px solid #e9e9e9;

        h3 {
            padding-left: 40px;
            margin: 0px;
        }
    }
}

.fresh_btn {
    font-size: 12px;
    color: #993d43;
    margin-left: 8px;
    cursor: pointer;
}


.tHeader {
    width: 1119px;
    border: 1px solid #f3f3f3;
    margin: 20px auto;
}


table {
    width: 100%;

    .th {
        height: 40px;
        line-height: 40px;
        width: 25%;
        text-align: center;
    }

    .th1 {
        width: 20%;
    }

    .th3 {
        width: 30%;
    }

    tr td {
        height: 40px;
        line-height: 40px;
        text-align: center;
    }
}

.bid_title {
    height: 90px;
    width: 100%;
}

.deatil_Bid li {
    font-size: 16px;
    color: #888;
    float: left;
    margin-bottom: 16px;
    margin-right: 70px;
}

.bidAll {
    display: flex;
    width: 1120px;
    background: #fafafa;
    border: 1px solid #eaeaea;
    margin: 58px auto 0;
    justify-content: center;

    .check {
        width: 302px;
        height: 44px;
        background: #e6f7ff;
        border: 1px solid #98b6df;
        border-bottom: 0;
        font-weight: 500;
        z-index: 2;
        left: 299px;
        text-align: center;
        line-height: 44px;
    }

    .bid_help_link {
        width: 46%;
    }
}


.auction_box {
    line-height: 50px;
    display: flex;
    padding-left: 159px;
    padding-top: 45px;
    padding-bottom: 45px;
    justify-content: flex-start;
    border: 1px solid #eaeaea;
    margin: 0px 41px;

    .reduce {
        width: 48px;
        height: 48px;
        text-align: center;
        line-height: 48px;
        border: 1px solid #c7c7c7;
        border-radius: 4px;
        background: #fff;
        cursor: pointer;
    }


    .auction_box_m {
        display: flex;
        justify-content: center;
    }

    .entry {
        width: 252px;
        height: 50px;
        text-align: center;
        margin: 0 9px;

        input {
            width: 230px;
            height: 48px;
            text-align: center;
            font-size: 24px;
            color: #333;
            background: #fff;
            border: 1px solid #c7c7c7;
            border-radius: 4px;
            font-weight: 600;
            padding: 0 10px;
        }
    }

    .increase {
        width: 48px;
        height: 48px;
        text-align: center;
        line-height: 57px;
        border: 1px solid #c7c7c7;
        border-radius: 4px;
        cursor: pointer;
        background: #fff;
    }

    .putPrice {
        width: 130px;
        height: 48px;
        text-align: center;
        line-height: 48px;
        font-size: 18px;
        color: #fff;
        background: #b8333c;
        border-radius: 4px;
        margin-top: 1px;
        margin-left: 30px;
        cursor: pointer;
    }

    .put_tip {
        height: 50px;
        line-height: 50px;
        margin-left: 16px;
        font-size: 14px;
        color: #888;
    }
}

.selectCon {
    display: none;
    // position: relative;
    z-index: 999;
    background-color: red;
}
</style> -->


<!-- 
<template>
    <div id="app">
      <header>
        <a href="javascript:void(0);" :class="active == '#home' ? 'active' : ''" @click="toTarget('#home')">首页</a>
        <a href="javascript:void(0);" :class="active == '#team' ? 'active' : ''"  @click="toTarget('#team')">团队</a>
        <a href="javascript:void(0);" :class="active == '#contact' ? 'active' : ''"  @click="toTarget('#contact')">联系</a>
        <a href="javascript:void(0);" :class="active == '#join' ? 'active' : ''"  @click="toTarget('#join')">加入我们</a>
      </header>
      <div id="home">
        首页
      </div>
      <div id="team">
        团队
      </div>
      <div id="contact">
        联系
      </div>
      <div id="join">
        加入我们
      </div>
    </div>
  </template>
  <script>
    export default {
      data() {
        return {
          active: '#home',
          scrollIntoViewOptions: {
            block: 'start',
            behavior: 'smooth'
          }
        }
      },
      mounted() {
        // 一次性计算赋值，减少滚动计算节点位置次数
        this.distance_team = document.querySelector('#team').offsetTop - 60
        this.distance_contact = document.querySelector('#contact').offsetTop - 60
        this.distance_join = document.querySelector('#join').offsetTop - 60
        this.$nextTick(function() {
          document.querySelector('#app').addEventListener('scroll', this.onScroll)
        })
        window.addEventListener('scroll', this.onScroll, true)
      },
      methods: {
        toTarget(target) {
          console.log(target)
          this.active = target
          const toElement = document.querySelector(target)
          toElement.scrollIntoView(this.scrollIntoViewOptions)
        },
        onScroll() {
          const scrolled = document.querySelector('.app-main').scrollTop
          if (scrolled < this.distance_team) {
            this.active = '#home'
          } else if (scrolled >= this.distance_team && scrolled < this.distance_contact) {
            this.active = '#team'
          } else if (scrolled >= this.distance_contact && scrolled < this.distance_join) {
            this.active = '#contact'
          } else {
            this.active = '#join'
          }
        }
      },
      destroyed() {
        window.removeEventListener('scroll', this.onScroll, true)
      }
    }
  </script>
  
  <style lang="scss" scoped>
    *{
      margin: 0;
      padding: 0;
    }
    #app {  //关键代码，需要给容器添加高度
      position: relative;
      width: 100%;
      height: 100vh;
    }
    header{
      width: 100%;
      height: 60px;
      position: fixed;
      top: 0px;
      left: 0px;
      z-index: 1;
      background: #fff;
      display: flex;
      display: -webkit-flex;
      justify-content: center;
      a{
        width: 200px;
        height: 60px;
        display: block;
        text-align: center;
        line-height: 60px;
        color: #333333;
        text-decoration: none;
        &:hover,&.active{
          color: dodgerblue;
        }
      }
    }
    #home,#team,#contact,#join{
      width: 100%;
      height: 500px;
      color: #FFFF;
      font-size: 30px;
      text-align: center;
      line-height: 500px;
    }
    #home{
      background: tomato;
    }
    #team{
      background: deepskyblue;
    }
    #contact{
      background: orange;
    }
    #join {
      height: 1000px;
      background: lightgreen;
    }
  </style> -->

<!-- <template>

  <div>
    <ul>
      <li v-for="item in piclist" :key="item.id">
      <img :src="item.path" alt="">
      </li>
    </ul>
  </div>
</template>

<script lang="ts">

import { defineComponent } from 'vue';

  export default defineComponent({
    data(){
      return {
        piclist:[
          {id:1,path:'pic/1.jpg'},
          {id:2,path:'pic/2.jpg'},
          {id:3,path:'pic/3.jpg'}, 
          {id:5,path:'pic/6.jpg'},
          {id:6,path:'pic/2.jpg'},
          {id:7,path:'pic/3.jpg'}
        ]
      }
    }
    
  }) 
</script>

<style lang="scss" scoped>

</style> -->



<!-- 放大镜 -->
<!-- <template>
  <div class="detailLeft">
    <div class="glassBox">
      <div class="left">
        <img class="leftImg" :src="currentImg" alt="">
        鼠标层罩 
        <div v-show="topShow" class="top" :style="topStyle"></div>
         最顶层覆盖了整个原图空间的透明层罩 
        <div class="maskTop" @mouseenter="enterHandler" @mousemove="moveHandler" @mouseout="outHandler"></div>
      </div>
      <div v-show="rShow" class="right">
        <img :style="r_img" class="rightImg" :src="currentImg" alt="">
      </div>
    </div>
    <div>
      轮播图
      <div class="change">
        <div class="lunBo">
           左箭头
          <div class="deatil_left_btn" @click="preFn"><img src="../assets/pre.png" alt=""></div>
          <div class="deatil_content" style="width:400px">
            <div class="item-box" style="width: 580px; " :style="prePosition">
              <div class="item" v-for="(imgarc,index) in imglist" :key="index" @mouseenter="getIndex(index)">
                <img :src="imgarc" alt="">
              </div>
            </div>
            <el-carousel :interval="2000" type="card" height="64px" arrow="always" width="400px">
                @mouseenter="getIndex(index)"
                <el-carousel-item v-for="(item,index) in imglist" :key="index">
                    <h3 justify="center">
                        <div>
                            <img :src="item" alt="" style="height:100%">
                        </div>
                    </h3>

                    
                </el-carousel-item>
            </el-carousel>
          </div>
         右箭头
          <div class="deatil_right_btn" @click="nextFn"><img src="../assets/next.png" alt=""></div>
        </div>
        <div class="deatil_buttom">
          <span style="float: left;">
            当前第
            <i>{{currentIndex+1}}</i>
            共
            <i>{{imglist.length}}</i>
            张
          </span>
          <span style="float: right;">点击图片可查看大图</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  data() {
    return {
      topStyle: { transform: '' },
      r_img: { transform: '' },
      topShow: false,
      rShow: false,
      // 存放图片的数组
      imglist: [
        'https://www.kfzimg.com/sw/kfz-cos/kfzimg/14050379/1/8e05e0805b274519de_crypt_s.jpg',
        'https://www.kfzimg.com/sw/kfz-cos/pmimg/1078750/81a6b2fb7f6c4ac3_s.jpg',
        'https://www.kfzimg.com/sw/kfz-cos/pmimg/1078750/cb0ee753b7d0b205_s.jpg',
        'https://www.kfzimg.com/sw/kfz-cos/pmimg/1078750/81a6b2fb7f6c4ac3_s.jpg',
        'https://img0.baidu.com/it/u=922902802,2128943538&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1664125200&t=4043343452e148641255d05f509607cc',
        'https://www.kfzimg.com/sw/kfz-cos/pmimg/1078750/81a6b2fb7f6c4ac3_s.jpg',
        'https://www.kfzimg.com/sw/kfz-cos/pmimg/1078750/cb0ee753b7d0b205_s.jpg',
        "https://www.kfzimg.com/sw/kfz-cos/pmimg/5014303/ccc736e9adc45aa1_s.jpg",
        "https://www.kfzimg.com/sw/kfz-cos/pmimg/5014303/cc84252cb1e53ba4_s.jpg"

      ],
      // 保存当前图片的下标
      currentIndex: 0,
      currentImg: "https://www.kfzimg.com/sw/kfz-cos/pmimg/5014303/cc84252cb1e53ba4_s.jpg",
      //点击触发pre函数，让盒子向左移动
      prePosition: { transform: "" },
      nextPosition: { transform: "" },
      position: 0
    }
  },
  methods: {
    // 鼠标进入原图空间函数
    enterHandler() {
      // 层罩及放大空间的显示
      this.topShow = true
      this.rShow = true
    },
    // 鼠标移动函数
    moveHandler(event: any) {
      // 鼠标的坐标位置
      let x = event.offsetX
      let y = event.offsetY
      // 层罩的左上角坐标位置，并对其进行限制：无法超出原图区域左上角
      let topX = (x - 100) < 0 ? 0 : (x - 100)
      let topY = (y - 100) < 0 ? 0 : (y - 100)
      // 对层罩位置再一次限制，保证层罩只能在原图区域空间内
      if (topX > 200) {
        topX = 200
      }
      if (topY > 200) {
        topY = 200
      }
      // 通过 transform 进行移动控制
      this.topStyle.transform = `translate(${topX}px,${topY}px)`
      this.r_img.transform = `translate(-${2 * topX}px,-${2 * topY}px)`
    },
    // 鼠标移出函数
    outHandler() {
      // 控制层罩与放大空间的隐藏
      this.topShow = false
      this.rShow = false
    },
    //获取图片的下标
    getIndex(index: number) {
      // console.log(index)
      this.currentIndex = index
    },
    preFn() {
      this.prePosition.transform = `translateX(${this.position}px)`;
      this.position += 64;
      // this.prePosition.transform = `translateX(-65px)`;
      // // transform: translateX(-134px);
      console.log('上一张')
    },
    nextFn() {
      this.prePosition.transform = `translateX(${this.position}px)`;
      this.position -= 64;
    },
  },
  watch: {
        //获取图片的下标
        currentIndex(index: number) {
            console.log(index)
            this.currentIndex = index

            this.currentImg=this.imglist[this.currentIndex]
        }
    }
})

</script>

<style lang="scss" scoped>
.detailLeft {
  position: relative;
  width: 400px;
  // height: 400px;
  border: 1px solid rgb(75, 72, 72);
  background: #f6f6f6;

}

/* 放大的图片，通过定位将左上角定位到(0,0) */
.glassBox {
  display: flex;
}

.rightImg {
  // display: inline-block;
  width: 800px;
  height: 800px;
  position: absolute;
  top: 0;
  left: 0;
}

/* 右边的区域图片放大空间 */
.right {
  margin-left: 412px;
  width: 600px;
  height: 600px;
  border: 1px solid red;
  position: absolute;
  overflow: hidden;
}

/* 一个最高层层罩 */
.maskTop {
  width: 400px;
  height: 400px;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}

/* 层罩，通过定位将左上角定位到(0,0) */
.top {
  width: 200px;
  height: 200px;
  background-color: lightcoral;
  opacity: 0.4;
  position: absolute;
  top: 0;
  left: 0;
}

/* 原图的显示 */
.leftImg {
  width: 400px;
  height: 400px;
  // display: inline-block;
}

/* 原图的容器 */
.left {
  width: 400px;
  height: 400px;
  border: 1px solid teal;
  float: left;
  position: relative;
}


.change {
  width: 100%;
  height: 101px;
  // border: 1px solid yellow;

  .deatil_left_btn {
    float: left;
    width: 18px;
    height: 32px;
    margin-top: 28px;

    img {
      width: 18px;
    }
  }

  .deatil_content {
    width: 100%;
    height: 64px;
    border: 1px solid #888;
    margin-top: 12px;
    padding-left: 8px;
    overflow: hidden;
    box-sizing: border-box;
    background-color: #fff;

    .item {
      // float: left;
      display: inline-block;
      width: 62px;
      height: 62px;
      background: #fff;
      border: 1px solid #eaeaea;
      font-size: 0;
      text-align: center;
      line-height: 102px;
      margin-right: 8px;
      border: 1px solid #9e100e;
      box-sizing: border-box;
      cursor: pointer;

      img {
        width: 100%;
        height: 41px;
      }
    }

  }

  .deatil_right_btn {
    margin-top: 28px;
    float: right;
    width: 18px;
    height: 32px;

    img {
      width: 18px;
    }
  }

  .deatil_buttom {
    width: 354px;
    font-size: 12px;
    color: #888;
    margin: 7px auto 0;
  }

  .lunBo {
    display: flex;
  }

}
</style> -->


<!-- 历史浏览记录 -->

<!-- <template>
  <div>
    <div class="auction_title" style="position:relative">
      <h3 style="float:left">最近浏览</h3>
    </div>

    <div class="record_list_box">
      <div class="storey_list">
        <div class="storey_item" style="height: 274px;" v-for="item in getSave" :key="item.id">
          <a href="">
            <div class="storey_list_img">
              <img :src="item.path" alt="">
            </div>
            <div class="storey_list_title">
              {{item.id}}
              【清光绪拾柒年 辛邓仲 友雲峰
              手抄订】【验方新编原刊信点牛痘说....等等.】4厚册全。是书；内有版画，纸张薄如蝉翼、版面整洁字大醒目、内附图解便后人易学易懂。望学者宝之。行书娴熟流畅，均非一般俗手可谓。
              阅着朱墨批点 非是一般庸手可为。品相如图。
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  data() {
    return {
      getSave: [] as Array<object>
    }
  },
  mounted() {
    let getData = (localStorage.getItem('historyData')) as string
    let newlist = getData.split(';')
    for (let i = 0; i < newlist.length - 1; i++) {
      this.getSave.push(JSON.parse(newlist[i]))
    }
    console.log(this.getSave)
  }

})
</script>

<style lang="scss" scoped>
.auction_title {
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  color: #404040;
  font-weight: 500;
  border-bottom: 1px solid #e9e9e9;

  h3 {
    padding-left: 40px;
    margin: 0px;
  }
}

.record_list_box {
  width: 1200px;
  border: 1px solid #e9e9e9;
  margin: 20px auto 0;
  text-align: justify;
}

.storey_list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding-top: 20px;
  word-break: break-all;
  text-align: justify;
  text-justify: inter-ideograph;

  .storey_item {
    margin-left: 27px;
  }

  .storey_list_img {
    width: 208px;
    height: 208px;
    background: #f6f6f6;
    text-align: center;
    line-height: 208px;
    font-size: 0;
    overflow: hidden;

    img {
      width: 100%;
      height: auto;
    }
  }

  .storey_list_title {
    width: 192px;
    font-size: 14px;
    color: #333;
    line-height: 22px;
    margin: 4px auto 0;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
}
</style> -->




<template>
  <div>
    <div class="deatil_box_middle" v-for="item in req" :key="item.id">
      <div class="fresh">
        <div class="price_box">
          <span class="name">当前价</span><span class="price_num">￥{{item.currentprice}}</span>
          <span class="fresh_btn btn_refresh">刷新价格</span>
          <a target="_blank"
            href="https://user.kongfz.com/User/Inform/addInform?informItemType=2&amp;toId=1078750&amp;toName=孔网古旧书店&amp;itemId=62994919&amp;itemName=Z：民国新文学精品 良友文库 阿英著作《夜航集》1935年初版本 软精装一册 开本尺寸15*10.5厘米 （此书 著者1933年至1935年间为各报刊所写的部分文章汇编。分4辑：小品文谈14篇；文艺随笔20篇；杂文杂考20篇；杂考5题。有介绍周作人、俞平伯、郭沫若、郁达夫、徐志摩等文学家的短文）"
            class="report_btn">举报</a>
        </div>
        <div class="first_name deatil_info">
          <span class="deatil_info_title">领先者</span>
          <span class="deatil_info_con" style="width: 400px;">{{item.leader}}</span>
        </div>
        <div class="deatil_info start_price">
          <span class="deatil_info_title">起拍价</span>
          <span class="deatil_info_con" style="width: 91px;">￥{{item.startprice}}</span>
        </div>
        <div class="deatil_info start_add">
          <span class="deatil_info_title" style="margin-right: 8px;">最小加价幅度</span>
          <span class="deatil_info_con">￥{{item.quotaprice}}</span>
        </div>

        <div id="delivery">
          <p class="address">
            <span class="deatil_info_title">配送至</span>
            <span class="operate-txt gray check">
              <!-- <label>北京市东城区</label> -->
              <label>
                <CitySelect></CitySelect>
              </label>
            </span>
          </p>
          <p style="float:left">
            <span class="deatil_info_title" style="margin-right: 8px;margin-bottom: 22px;">运费</span>
            <span class="operate-txt gray">快递&nbsp;￥ {{item.deliveryfee}}</span>
          </p>
        </div>


        <div class="deatil_btn_box">
          <div id="put_price">
            <span>我要出价</span>
          </div>
          <div class="like">
            <img src="../assets/colect.webp" alt="" style="width:32px">
            <div style="display:inline;" @click="collectBtn">收藏</div>
          </div>
          <div class="tip" style="position: relative;">
            <span><img src="../assets/tips.webp" alt=""></span>
            参拍提醒
          </div>
        </div>
        <div class="border-box"></div>
      </div>

      <div class="time">
        <div class="deatil_title">
          <span class="info_element_title">剩余时间</span>
          <span class="gray">
            <TimerL></TimerL>
          </span>
        </div>
        <div class="deatil_title">
          <span class="info_element_title">开始时间</span>
          <span class="gray">2022-09-21 21:02:59</span>
        </div>
        <div class="deatil_title">
          <span class="info_element_title">结束时间</span>
          <span class="gray">2022-09-21 21:02:59</span>
        </div>
        <div class="deatil_title diff">
          <div class="element" style="width:147px">
            <span class="info_element_title">出价次数</span>
            <span class="gray">59</span>次

          </div>
          <div class="element" style="width:147px">
            <span class="info_element_title">浏览次数</span>
            <span class="gray red">{{count}}100</span>次
          </div>
        </div>
      </div>
      <div class="border-box"></div>

      <div style="float: left">
        <i class="icon pc-icon icon-bao-16px" style="position: relative;top: 1px;margin-right: 6px;">
        </i>
        <span style="color:#888; font-size: 14px;">担保交易 安全无忧</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
// import { getarticle } from '@/utils/api';
import { collects } from '@/utils/api';
import { defineComponent } from 'vue';
import CitySelect from './CitySelect.vue';
import TimerL from './TimerL.vue'

export default defineComponent({
  props: ['aid', 'req'],
  components: { CitySelect, TimerL },
  methods: {
    collectBtn() {
      let id = this.req.id;
      collects(id).then((res) => {
        console.log(res);

      }).catch(err => {
        console.log(err);

      })
    }
  },
  data() {
    return {
      result: "",
      count: 0
    };

  },
  // watch: {
  //     //   aid: function(newVal){
  //     //     this.cData = newVal; //newVal即是chartData
  //     //     console.log( this.cData)
  //     //   }
  // },
  // methods: {
  //     getData(aid: any) {
  //         // let result;
  //         // getarticle(this.aid).then((res) => {
  //         //     if (res.status === 200) {
  //         //         result = res.data;
  //         //     }
  //         // });
  //         // console.log(aid);
  //         // return result;
  //     }
  // },
  // mounted() {
  //     // this.getData(this.aid);
  //     // console.log(JSON.parse(JSON.stringify(this.req))) // 序列化后可以取值
  //     console.log('1122',this.aid)
  //     console.log('@@',this.req.aid)
  //     console.log('@@',this.req.req)
  // },
})
</script>

<style lang="scss" scoped>
.deatil_box_middle {

  width: 496px;
  padding-left: 40px;
  height: 50px;

  .price_box {
    width: 100%;
    height: 28px;
    line-height: 20px;
    margin-bottom: 8px;

    .name {
      font-size: 14px;
      color: #888;
      margin-right: 20px;
    }

    .price_num {
      font-size: 24px;
      color: #8c222c;
      font-weight: 600;
    }

    .fresh_btn {
      font-size: 12px;
      color: #993d43;
      margin-left: 8px;
      cursor: pointer;
    }

    .report_btn {
      float: right;
      font-size: 12px;
      color: #c7c7c7;
      height: 14px;
      cursor: pointer;
    }
  }

  .first_name {
    height: 25px;
  }

  .start_price {
    height: 25px;
  }

  .start_add {
    height: 25px;
  }

  #delivery {
    height: 54px;

    .check {
      display: inline-block;
      color: #888;
      line-height: 32px;
      height: 32px;
      border: 1px solid #ccc;
    }

    .address {
      line-height: 34px;
    }

  }

  .deatil_info {
    margin-bottom: 12px;
    line-height: 25px;
  }

  .deatil_info_title {
    float: left;
    font-size: 14px;
    color: #888;
    margin-right: 20px;
  }

  .deatil_info_con {
    width: 152px;
    float: left;
    font-size: 14px;
    color: #404040;
  }

  .address {
    float: left;
    min-width: 280px;
    margin-right: 10px;
  }

  .deatil_btn_box {
    margin-bottom: 30px;
    height: 64px;

    #put_price {
      float: left;
      width: 164px;
      height: 52px;
      line-height: 52px;
      background: #993d43;
      border-radius: 4px;
      font-size: 20px;
      color: #fff;
      text-align: center;
      cursor: pointer;
      margin-right: 12px;
    }

    .like {
      float: left;
      width: 98px;
      height: 50px;
      line-height: 50px;
      border: 1px solid #c7c7c7;
      border-radius: 4px;
      text-align: center;
      font-size: 20px;
      color: #404040;
      cursor: pointer;
      margin-right: 20px;

      img {
        width: 32px;
        vertical-align: middle;
        opacity: 0.5;
        margin-right: 5px;
      }
    }

    .tip {
      float: right;
      width: 76px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 14px;
      color: #404040;
      cursor: pointer;
    }

  }
}

.border-box {
  width: 497px;
  margin-bottom: 20px;
  border-bottom: 1px dashed #e9e9e9;
}

.deatil_title {
  font-size: 14px;
  color: #888;
  margin-right: 20px;
  margin-bottom: 24px;

}

.diff {
  display: flex;
}

.info_element_title {
  margin-right: 20px;
}

.gray {
  color: #404040;
}

.red {
  color: #993d43;
}

.tip img {
  width: 30px;
  position: absolute;
  top: 8px;
  left: -36px;
  opacity: 0.5;
}
</style>